<template>
    <div>
        <ayjTable 
            :columns="columns" 
            :data="top_ls" 
            :height="dynamicHeight"
        >
            <template #column-profit="{ row }">
                <span class="font_green"> {{row.profit || 0 }} </span>
            </template>
        </ayjTable>
    </div>
</template>

<script setup>
import { ref, onMounted, defineProps, computed, watch } from '@vue/composition-api'
import { usePurchaseState } from '@/pages/report/hooks/usePurchaseState'

const props = defineProps({
    dynamicHeight: {
        type: Number,
        default: 300
    }
})

// 使用销售状态
const {
    top_ls,
    reqQuery
} = usePurchaseState()

const columns = computed(() => [
    {
        title: '序号',
        prop: 'index',
        width: '50px',
        align: 'center',
        render: (row, column, index) => index + 1,
    },
    { title: '日期', prop: (reqQuery.value.group == 2 || reqQuery.value.group == 3) ? 'time' : 'timestr'},
    { title: '采购额', prop: 'amount', align: 'center',width:"80px"},
    { title: '毛利', prop: 'profit', align: 'center', slot: true,width:"80px" },
    { title: '单数', prop: 'num_od', align: 'center',width:"60px" },
    { title: '数量', prop: 'number', align: 'center',width:"60px" },
])

watch(() => top_ls.value, (newVal) => {})

onMounted(() => {})

</script>

<style lang="scss" scoped>

::v-deep .el-dialog__body {
    padding: 10px 0 !important;
}

.customer_points_top {
    padding: 10px;
    border-radius: 6px;
}

.select_store ::v-deep .el-input__inner {
    background-color: #f5f5f5 !important;
    border: none !important;
    color: #333 !important;
    padding-left: 4px !important;
    text-align: left !important;
    // border-bottom: 1px solid #e9dede !important;
    border-radius: 0 !important;
}

.customer_points_top ::v-deep .el-divider--vertical {
    height: 1.5rem !important;
    position: relative;
    left: -10px;
}

.container_box {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.table_box {
    flex: 1;
}
</style>
